<!-- components/CustomToast.vue -->
<template>
  <div v-if="visible" class="custom-toast">
    <div class="toast-mask"></div>
    <div class="toast-content">
      <!-- <i class="toast-icon">!</i> -->
      <div class="toast-text">{{ message }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: ""
    };
  },
  methods: {
    show(message, duration = 2000) {
      this.message = message;
      this.visible = true;
      
      setTimeout(() => {
        this.visible = false;
      }, duration);
    }
  }
};
</script>

<style scoped>
.custom-toast {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toast-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
}

.toast-content {
  position: relative;
  /* min-width: 300px; */
  /* max-width: 80%; */
  padding: 20px;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
  color: #fff;
  display: flex;
  align-items: center;
  animation: toast-fade 0.3s;
}

.toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFB800;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  font-style: normal;
  font-weight: bold;
}

.toast-text {
  flex: 1;
  /* font-size: 26rpx; */
  font-size: 27rpx; font-family: 'SourceHanSans';
  line-height: 1.5;
  word-break: break-word;
}

@keyframes toast-fade {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>